<template>
  <div class="dramas-grid">
    <div v-for="drama in dramas" :key="drama.id" class="drama-card">
      <div class="drama-cover">
        <img :src="drama.cover" :alt="drama.title" />
        <div class="drama-status" :class="drama.status">
          {{ getStatusText(drama.status) }}
        </div>
        <div class="drama-episode" v-if="drama.currentEpisode">
          {{ drama.currentEpisode }}/{{ drama.totalEpisodes }}
        </div>
        <!-- 播放按钮覆盖层 -->
        <div class="play-overlay" @click="playDrama(drama)">
          <div class="play-icon">▶️</div>
        </div>
      </div>
      <div class="drama-content">
        <h3 class="drama-title">{{ drama.title }}</h3>
        <p class="drama-description">{{ drama.description }}</p>
        <div class="drama-info">
          <span class="drama-year">{{ drama.year }}</span>
          <span class="drama-genre">{{ drama.genre }}</span>
        </div>
        <div class="drama-actions">
          <button
            class="follow-btn"
            @click="followDrama(drama)"
            :class="{ following: drama.isFollowing }">
            {{ drama.isFollowing ? "✅ 已追番" : "📺 追番" }}
          </button>
          <button class="bilibili-btn" @click="goToBilibili(drama)">🎬 B站观看</button>
        </div>
      </div>
    </div>

    <!-- 视频播放对话框 -->
    <DialogCard
      v-if="showVideoDialog"
      :dialog-title="currentDrama?.title || '视频播放'"
      @cancel="closeVideoDialog">
      <template #body>
        <div class="video-dialog-content">
          <VideoPlayer
            :video-src="currentDrama?.videoUrl || ''"
            :title="currentDrama?.title || ''" />
          <div class="video-info">
            <h4>{{ currentDrama?.title }}</h4>
            <p>{{ currentDrama?.description }}</p>
            <div class="video-actions">
              <button class="bilibili-btn-large" @click="goToBilibili(currentDrama)">
                🎬 去B站观看完整版
              </button>
            </div>
          </div>
        </div>
      </template>
    </DialogCard>
  </div>
</template>

<script setup>
import { onMounted, ref } from "vue"
import DialogCard from "../components/Dialog.vue"
import VideoPlayer from "../components/VideoPlayer.vue"
import appStore from "@/stores"
import { GetUrl } from "@/apis/allAPI/user"

const showVideoDialog = ref(false)
const currentDrama = ref(null)
const dramas = [
  {
    id: 1,
    title: "间谍过家家",
    description:
      '为了维护世界和平，顶级间谍"黄昏"必须组建一个虚假的家庭。然而，他不知道自己的"女儿"是超能力者，"妻子"是职业杀手。',
    cover: "/covers/cover1.jpg",
    status: "ongoing",
    currentEpisode: 12,
    totalEpisodes: 25,
    year: 2022,
    genre: "喜剧/动作",
    isFollowing: true,
    videoUrl: "https://www.bilibili.com/bangumi/play/ep691450?spm_id_from=333.337.0.0",
    bilibiliUrl: "https://www.bilibili.com/bangumi/play/ep691450?spm_id_from=333.337.0.0",
  },
  {
    id: 2,
    title: "鬼灭之刃",
    description:
      "日本大正时期，那是一个鬼怪横行的时代。为了拯救变成鬼的妹妹，灶门炭治郎踏上了斩鬼之旅。",
    cover: "/covers/cover2.jpg",
    status: "completed",
    currentEpisode: 26,
    totalEpisodes: 26,
    year: 2019,
    genre: "动作/奇幻",
    isFollowing: true,
    videoUrl: "https://www.bilibili.com/bangumi/play/ep234567",
    bilibiliUrl: "https://www.bilibili.com/bangumi/play/ss234567",
  },
  {
    id: 3,
    title: "进击的巨人",
    description:
      "人类为了对抗巨人的威胁，建造了三道巨大的城墙。然而，当超大型巨人出现时，人类的命运将何去何从？",
    cover: "/covers/cover1.jpg",
    status: "completed",
    currentEpisode: 25,
    totalEpisodes: 25,
    year: 2013,
    genre: "动作/剧情",
    isFollowing: false,
    videoUrl: "https://www.bilibili.com/bangumi/play/ep345678",
    bilibiliUrl: "https://www.bilibili.com/bangumi/play/ss345678",
  },
  {
    id: 4,
    title: "咒术回战",
    description: "虎杖悠仁为了拯救被诅咒附身的同学，吞下了诅咒的手指，从此踏上了与诅咒战斗的道路。",
    cover: "/covers/cover2.jpg",
    status: "ongoing",
    currentEpisode: 8,
    totalEpisodes: 24,
    year: 2020,
    genre: "动作/奇幻",
    isFollowing: true,
    videoUrl: "https://www.bilibili.com/bangumi/play/ep456789",
    bilibiliUrl: "https://www.bilibili.com/bangumi/play/ss456789",
  },
  {
    id: 5,
    title: "海贼王",
    description: '路飞为了成为海贼王，踏上了寻找传说中的宝藏"One Piece"的冒险之旅。',
    cover: "/covers/cover1.jpg",
    status: "ongoing",
    currentEpisode: 1080,
    totalEpisodes: "未知",
    year: 1999,
    genre: "冒险/动作",
    isFollowing: false,
    videoUrl: "https://www.bilibili.com/bangumi/play/ep567890",
    bilibiliUrl: "https://www.bilibili.com/bangumi/play/ss567890",
  },
  {
    id: 6,
    title: "火影忍者",
    description: "漩涡鸣人为了成为火影，不断修炼忍术，与伙伴们一起面对各种挑战和敌人。",
    cover: "/covers/cover2.jpg",
    status: "completed",
    currentEpisode: 720,
    totalEpisodes: 720,
    year: 2002,
    genre: "动作/冒险",
    isFollowing: true,
    videoUrl: "https://www.bilibili.com/bangumi/play/ep678901",
    bilibiliUrl: "https://www.bilibili.com/bangumi/play/ss678901",
  },
]

const getStatusText = (status) => {
  const statusMap = {
    ongoing: "连载中",
    completed: "已完结",
    upcoming: "即将播出",
  }
  return statusMap[status] || status
}

const followDrama = (drama) => {
  drama.isFollowing = !drama.isFollowing
  // 这里可以添加与后端的交互逻辑
}

const playDrama = (drama) => {
  currentDrama.value = drama
  GetUrl(
    { type: "video", object_key: "间谍过家家(1).mp4" },
    (rData) => {
      showVideoDialog.value = true
      currentDrama.value.videoUrl = rData
    },
    () => {
      switchTipStatus({
        level: "warning",
        msg: "请求失败，请重试",
      })
    }
  )
}

const closeVideoDialog = () => {
  showVideoDialog.value = false
  currentDrama.value = null
}

const goToBilibili = (drama) => {
  if (drama && drama.bilibiliUrl) {
    window.open(drama.bilibiliUrl, "_blank")
  }
}

onMounted(() => {
  appStore.homeviewStore.hidePageLoading()
})
</script>

<style scoped>
.dramas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
  padding: 1rem 0;
}

.drama-card {
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--border-radius);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: var(--transition);
  display: flex;
  flex-direction: column;
  height: 100%;
}

.drama-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow);
  border-color: rgba(var(--primary-rgb), 0.5);
}

.drama-cover {
  width: 100%;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.drama-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.drama-card:hover .drama-cover img {
  transform: scale(1.05);
}

.drama-status {
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
  backdrop-filter: blur(10px);
}

.drama-status.ongoing {
  background: rgba(76, 175, 80, 0.8);
}

.drama-status.completed {
  background: rgba(156, 39, 176, 0.8);
}

.drama-status.upcoming {
  background: rgba(255, 152, 0, 0.8);
}

.drama-episode {
  position: absolute;
  bottom: 10px;
  right: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 500;
  color: white;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(10px);
}

.play-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
  cursor: pointer;
}

.drama-card:hover .play-overlay {
  opacity: 1;
}

.play-icon {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  backdrop-filter: blur(10px);
  transition: all 0.2s ease;
}

.play-overlay:hover .play-icon {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.drama-content {
  padding: 1.5rem;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.drama-title {
  font-size: 1.2rem;
  font-weight: bold;
  color: var(--text);
  margin-bottom: 0.8rem;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drama-description {
  color: var(--gray);
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.drama-info {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  font-size: 0.85rem;
}

.drama-year {
  color: var(--primary);
  font-weight: 500;
}

.drama-genre {
  color: var(--secondary);
  font-weight: 500;
}

.drama-actions {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.follow-btn {
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
  flex: 1;
  min-width: 100px;
}

.follow-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.follow-btn:active {
  transform: translateY(0);
}

.follow-btn.following {
  background: linear-gradient(135deg, var(--secondary), var(--primary));
  opacity: 0.8;
}

.follow-btn.following:hover {
  opacity: 1;
}

.bilibili-btn {
  background: linear-gradient(135deg, #00a1d6, #fb7299);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 161, 214, 0.3);
  flex: 1;
  min-width: 100px;
}

.bilibili-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 161, 214, 0.4);
}

.bilibili-btn:active {
  transform: translateY(0);
}

/* 视频对话框样式 */
.video-dialog-content {
  width: 100%;
  max-width: 800px;
}

.video-info {
  margin-top: 1.5rem;
  padding: 1rem;
  background: var(--card-bg);
  border-radius: 8px;
  border: 1px solid var(--glass-border);
}

.video-info h4 {
  color: var(--text);
  margin-bottom: 0.5rem;
  font-size: 1.1rem;
}

.video-info p {
  color: var(--gray);
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 1rem;
}

.video-actions {
  display: flex;
  justify-content: center;
}

.bilibili-btn-large {
  background: linear-gradient(135deg, #00a1d6, #fb7299);
  color: white;
  border: none;
  padding: 1rem 2rem;
  border-radius: 12px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 15px rgba(0, 161, 214, 0.3);
}

.bilibili-btn-large:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 161, 214, 0.4);
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .dramas-grid {
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 1.5rem;
  }
}

@media (max-width: 768px) {
  .dramas-grid {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 1rem;
  }

  .drama-content {
    padding: 1rem;
  }

  .drama-title {
    font-size: 1.1rem;
  }

  .drama-description {
    font-size: 0.9rem;
  }

  .drama-info {
    font-size: 0.8rem;
  }

  .drama-actions {
    flex-direction: column;
  }

  .follow-btn,
  .bilibili-btn {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .dramas-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .drama-cover {
    height: 180px;
  }

  .drama-status,
  .drama-episode {
    font-size: 0.7rem;
    padding: 3px 6px;
  }

  .play-icon {
    width: 50px;
    height: 50px;
    font-size: 1.2rem;
  }
}
</style>
